<script lang="ts">
import {defineComponent} from 'vue'
import BottomBar from "./BottomBar.vue";

export default defineComponent({
  name: "Home",
  components: {BottomBar},
  data() {
    return {
      user_id: "id尚未刷新"
    }
  },
  mounted() {
    this.user_id = this.$cookies.get("user_id") == undefined ||
    this.$cookies.get("user_id") == "" ? "游客" : this.$cookies.get("user_id");
  },
  methods: {
    toUserInfo() {
      if (this.$cookies.get("user_id") == undefined || this.$cookies.get("user_id") == "") {
        alert("游客状态下无法查看个人信息");
      } else {
        this.$router.push("/mine/userInfo");
      }
    },
    toStarDish() {
      if (this.$cookies.get("user_id") == undefined || this.$cookies.get("user_id") == "") {
        alert("游客状态下无法查看收藏菜品");
      } else {
        this.$router.push("/mine/starDish");
      }
    },
    toEatenDish() {
      if (this.$cookies.get("user_id") == undefined || this.$cookies.get("user_id") == "") {
        alert("游客状态下无法查看吃过的菜品");
      } else {
        this.$router.push("/mine/eatenDish");
      }
    },
    toAdmin() {
      this.$router.push("/admin_add");
    },
    quit() {
      this.$cookies.set("user_id", "");
      this.$router.push("/login");
    }
  }
})
</script>

<template>
  <div id="box">
    <div id="title">个人中心</div>
    <div> user_id : {{ user_id }}</div>
    <van-divider/>
    <van-space>
      <van-icon name="user-o" @click="toUserInfo">个人信息</van-icon>
      <van-icon name="todo-list-o" @click="toEatenDish">吃过的菜</van-icon>
      <van-icon name="star-o" @click="toStarDish">收藏菜品</van-icon>
      <van-icon v-if="$isAdmin()" name="manager-o" @click="toAdmin">内容管理</van-icon>
    </van-space>
    <van-divider/>
    <van-button type="primary" @click="quit">退出登录</van-button>
  </div>
  <BottomBar active="my"/>
</template>

<style scoped>
#box {
  text-align: center;
}
</style>